<template>
	<view class="page">
		<view class="card">
			<view class="title">填写要帮做的事情<text class="c_red">(必填)</text></view>
			<u--textarea v-model="orderContent" border='none'
				placeholder="点击输入你的需求，如去某地领取快递送去某个宿舍，代打印资料，代买奶茶等......"></u--textarea>
		</view>
		<view class="card">
			<view class="title">仅限接单人可见的私人信息<text>(选填)</text></view>
			<u--input placeholder="请输入手机号" v-model="phone" border='none' class="inpu" maxlength="11"></u--input>
			<u--textarea v-model="remark" border='none' placeholder="输入更多备注信息，如取件码，收获地址，送达时间等......"></u--textarea>
			<view class="tips">最多显示1张照片</view>

			<image :src="images" class="add_img" mode="aspectFit" @click="uploadImg" v-if="images"></image>
			<view class="add" @click="uploadImg" v-else>+</view>
		</view>
		<view class="card">
			<view class="tips">
				确认佣金
			</view>
			<u--input placeholder="请输入" v-model="amount" type='number' class="inpu bg"></u--input>
		</view>
		<view class=" posi_f dis aic jcsb">
			<view><text class="pricename">佣金</text><text class="price">￥{{amount ? amount : 0}}</text></view>
			<view class="btn" @click="save">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	import {
		release
	} from '@/api.js'
	export default {
		data() {
			return {
				orderContent: '',
				phone: '',
				remark: '',
				images: '',
				amount: '',
				isLock: false
			}
		},
		methods: {
			async save() {
				if (!this.orderContent || this.orderContent == '') {
					uni.showToast({
						title: '请填写要帮做的事',
						icon: "none"
					})
					return
				}
				if (!this.amount || this.amount == '') {
					uni.showToast({
						title: '请填写佣金',
						icon: "none"
					})
					return
				}
				if (this.isLock) {
					return
				}
				this.isLock = true
				let res = await release({
					orderContent: this.orderContent,
					phone: this.phone,
					remark: this.remark,
					images: this.images,
					amount: this.amount
				})
				if (res.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: "none"
					})
					setTimeout(() => {
						this.isLock = false
						uni.reLaunch({
							url: '/pages/index/orderDetail?id=' + res.result
						})
					}, 2000)
				} else {
					this.isLock = false
				}
			},
			uploadImg() {
				var that = this

				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '加载中',
							mask: true,
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.cardAddVOS = []
						uni.uploadFile({
							url: 'https://xybl.appldkj.com/api/jeecg-boot/sys/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								// 'user': 'test'
							},
							success: (uploadFileRes) => {
								uni.hideLoading()
								let msg = JSON.parse(uploadFileRes.data).message
								that.images = msg
								console.log('上传的图片msg', msg);
							}
						});
					}
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.page {
		background: #F8F8F8;
		width: 750rpx;
		min-height: 100vh;
		padding: 14rpx 0 0;
		box-sizing: border-box;

		.card {
			background: #fff;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			width: 690rpx;
			margin: 14rpx 30rpx 0;
			padding: 34rpx 38rpx;
			box-sizing: border-box;

			.title {
				font-family: Inter, Inter;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}

			.inpu {

				padding-left: 18rpx !important;
				margin: 10rpx 0;

			}

			.bg {
				background: #F5F5F5;
			}

			.tips {
				font-family: Inter, Inter;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}

			.add {
				width: 206rpx;
				height: 206rpx;
				line-height: 206rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx solid #D9D9D9;
				text-align: center;
				margin: 10rpx 0;
				font-size: 80rpx;
				color: #D9D9D9;
			}

			.add_img {
				width: 206rpx;
				height: 206rpx;
			}
		}

		.posi_f {
			padding: 34rpx 38rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			margin: 0;
			height: 171rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.btn {
				width: 189rpx;
				height: 80rpx;
				background: #F6D44D;
				border-radius: 11rpx 11rpx 11rpx 11rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}

			.pricename {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.price {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 48rpx;
				color: #ED0000;
			}
		}
	}

	.c_red {
		color: red;
	}
</style>